<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn :number2="num2" :number1="num1"
       @change1="input1change"
       @change2="input2change"></cpn>
</div>
<template id="cpn">
  <div>
    <h2>props:{{number1}}</h2>
    <h2>data:{{dnumber1}}</h2>
<!--    <input type="text" v-model="dnumber1">-->
    <input type="text" :value="dnumber1" @input="input1change">
    <h2>props:{{number2}}</h2>
    <h2>data:{{dnumber2}}</h2>
<!--    <input type="text" v-model="dnumber2">-->
    <input type="text" :value="dnumber2" @input="input2change">
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  const cpn={
    template: '#cpn',
    props: {
      number1: Number,
      number2: Number
    },
    data(){
      return{
        dnumber1:this.number1,
        dnumber2:this.number2
      }
    },
    methods:{
      input1change(event){
        this.dnumber1=event.target.value
        this.$emit('change1',parseFloat(this.dnumber1))

        this.dnumber2=this.dnumber1 * 10
        this.$emit('change2',parseFloat(this.dnumber2))
      },
      input2change(event){
        this.dnumber2=event.target.value
        this.$emit('change2',parseFloat(this.dnumber2))

        this.dnumber1=this.dnumber2 / 10
        this.$emit('change1',parseFloat(this.dnumber1))
      }

    }
  }


  const vm = new Vue({
    el: '#app',
    data: {
      num1: 0,
      num2: 0
    },
    methods: {
      input1change(num){
        this.num1=num
      },
      input2change(num){
        this.num2=num
      }
    },
    components: {
      cpn
      // cpn: {
      //   template: '#cpn',
      //   props: {
      //     number1: Number,
      //     number2: Number
      //   },
      //   data(){
      //     return{
      //       dnumber1:this.number1,
      //       dnumber2:this.number2
      //     }
      //   },
      //   methods:{
      //     input1change(event){
      //       this.dnumber1=event.target.value
      //       this.$emit('change1',parseFloat(this.dnumber1))
      //
      //       this.dnumber2=this.dnumber1 * 10
      //       this.$emit('change2',parseFloat(this.dnumber2))
      //     },
      //     input2change(event){
      //       this.dnumber2=event.target.value
      //       this.$emit('change2',parseFloat(this.dnumber2))
      //
      //       this.dnumber1=this.dnumber2 / 10
      //       this.$emit('change1',parseFloat(this.dnumber1))
      //     }
      //
      //   }
      //
      // }
    }
  })
</script>

</body>
</html>